<template>
  <view>
    <view class="login">
      <view class="content">
        <image :src="base_Image_url + 'logo.png'" mode="" class="logo"></image>
        <!-- <view class="logo" /> -->
        <view class="text">
          专注医药行业
        </view>
      </view>
<!--      @tap="doLogin"-->
      <view class="login-button" >
<!--        <up-button :loading="loading" :custom-style="{ background: '#1f50f2', color: '#fff', width: '570rpx', height: '84rpx', fontWeight: 'bold', fontSize: '26rpx' }" shape="circle" text="一键登录" />-->
        <button
          type="default"
          open-type="getPhoneNumber"
          @getphonenumber="getphonenumber"
          :style="{background: '#1f50f2', color: '#fff', width: '570rpx', height: '84rpx', fontWeight: 'bold', fontSize: '26rpx',display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50rpx'}">
          一键登录</button>
      </view>
      <view>
        <view class="footer">
          <up-checkbox v-model:checked="aloneChecked" style="display: inline-block; margin: 0" :size="12" :label-size="12" :custom-style="{ marginBottom: '8px' }" label="我已阅读并同意" name="agree" used-alone />
          <span>《用户协议》</span>
          <span>《隐私政策》</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store';
import {getTimDataApi} from "@/api/user";
import Tim from "@/utils/ImSocket";

const loading = ref<boolean>(false);
const aloneChecked = ref<boolean>(false);
const { authLogin, login, setUserInfo } = useUserStore();
const doLogin = async (encryptedData, iv) => {
  if (!aloneChecked.value) {
    return uni.$u.toast('请确认用户协议');
  }
  loading.value = true;
  try {
    await authLogin('weixin', encryptedData, iv);
    // await login();
    setTimeout(async() => {
      await setUserInfo();
      getTimDataApi({
        user_id: uni.getStorageSync('user') ? JSON.parse(uni.getStorageSync('user')).info.id : ''
      }).then(res => {
        Tim.CreateTim(res)
      })
      uni.switchTab({
        url: '/pages/tab/home/index',
      });
    }, 1000)
  }
  catch (error) {

  }
  loading.value = false;
};
const getphonenumber = (event) => {
  console.log(event)
  const {encryptedData, iv} = event.detail
  doLogin(encryptedData, iv)
}
</script>

<style lang="scss" scoped>
.login {
  .content {
    .logo {
      display: block;
      margin: 0 auto;
      margin-top: 20vh;
      margin-bottom: 18px;
      width: 180rpx;
      height: 180rpx;
      // background: red;
      border-radius: 50%;
      image{
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
      }
    }

    .text {
      display: block;
      font-size: 14px;
      text-align: center;
      letter-spacing: 16.83rpx;
    }
  }

  ::v-deep .u-checkbox {
    margin: 0 !important;
  }

  .login-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 30vh;
  }

  .agree {
    font-size: 12px;
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    height: 60rpx;
  }
}
</style>
